<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
<div id="app">
    {{ nickname }}
    <!--   渲染     -->
    <input type="text" v-model="nickname">
    <!--    这个数据改动会触发数据更新阶段-->
</div>
<script>
    // 在vue3版本中这两个语句报错
    Vue.config.devtools = true
    // 控制台不显示提示信息
    Vue.config.productionTip = false;  // 开发模式下去掉提示信息
    let vm = new Vue({
        // el: "#app", // 触发数据创建阶段
        // template:"<h1>{{nickname}}</h1>", // 模板
        data() {
            return {
                nickname: 'jack',
            }
        },
        //    在 Vue这个实例对象中获取容器 this.$el
        //    在创建一个vue对象以后 该对象会经历一个生命周期
        //    这个生命周期的第一个阶段就是创建之前beforeCreate
        //创建之前(没有页面，没有数据)
        beforeCreate() {
            console.log('beforeCreate:', this.$el, this.nickname)
            //    数据的渲染 在创建之前这一步中去寻找一个模板进行渲染如果有template
            //    就渲染template并把渲染结果放在el的html容器中。
            //    ** 如果有模板是用模板生成的内容去覆盖容器的内容，而容器的其余内容就不显示
            //    如果没有就去吧el中的html内容当做template

            //    以上这种或者有template或者el叫vue的自动渲染
            //    如果没有自动渲染 也不会 报错 它会等待VUE对象手动渲染
            //    手动渲染的方法： vm.$mount()vue对象触发$mount()方法来渲染
        },
        // 创建完成（没有页面，有数据说明数据已经准备好了）
        created() {
            // 这个阶段，数据以及准备好了,可以做一些根数据相关的操作
            // 请求数据的操作，通常也放在这个环节
            console.log('created:', this.$el, this.nickname)
        },
        beforeMount() {
            // 在创建完成之前 这里仍然是{{nickname}}模板数据
            console.log('beforeMount:', this.$el, this.nickname)
        }, // 页面渲染
        mounted() {
            // 这个阶段，页面渲染完成 可以 围绕DOM进行操作了
            console.log('mounted:', this.$el, this.nickname)
        }, // 页面渲染完成
        //    一般情况下 created阶段数据好了 mounter页面好了 一般只用这两个阶段
        beforeUpdate() {
            console.log("数据修改前");
        }, // 数据修改之前
        updated() {
            console.log("数据修改完成");
        }, // 数据修改完成
        beforeDestroy() {
            console.log("数据销毁之前")
        }, // 数据销毁之前
        destroyed() {
            console.log("数据销毁完成")
        } // 数据销毁完成
    })
    // 定时器
    setTimeout(function () {
        // 手动渲染 和 自动渲染同时存在的时候，先将数据执行自动渲染
        // 如果有template就覆盖el 如果没有就将数据渲染到el中
        // 如果是手动渲染 也要看是都有template
        // 也就是自动渲染还是手动渲染只看vue对象是否声明了el属性
        // mount_渲染或挂载

        vm.$mount("#app"); // 触发页面数据渲染阶段
    }, 2000);

    /*
    *  手动渲染页面容器 $mount方法
    * */
    setTimeout(function () {
        // 手动渲染 和 自动渲染同时存在的时候，先将数据执行自动渲染
        // 如果有template就覆盖el 如果没有就将数据渲染到el中
        // 如果是手动渲染 也要看是都有template
        // 也就是自动渲染还是手动渲染只看vue对象是否声明了el属性
        // mount_渲染或挂载
        vm.$mount("#app"); // 触发页面数据渲染阶段
    }, 2000);
    /*
    *  手动销毁vue对象
    * */
    setTimeout(function (){
        vm.$destroy();
    },5000)

</script>
</body>
</html>
